<template>
  <div class="mycart">
    <navHeader />
 
    <div class="prouct-model">
      <table cellspacing="0">
        <tr style="  position: sticky;left:10px;top:50px;z-index: 999;">
          <th>产品图</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
        </tr>
        <tr v-for="(item, index) in result" :key="item.mcid">
          <td><img :src="item.cover" alt="" /></td>
          <td>{{ item.price }}</td>
          <td class="changnum">
            <div class="boxincreate" @click="item.num++">+</div>
            <span>{{ item.num < 0 ? (item.num = 0) : item.num }}</span>
            <div class="boxdecreate" @click="item.num--">-</div>
          </td>
          <td class="delete">
            {{ (item.num * item.price).toFixed(2) }}
            <span
              ><van-icon name="delete-o" @click="deletemycart(item.mcid)"
            /></span>
          </td>
        </tr>
      </table>
    </div>
    <div class="mycart-bottom">
      <van-submit-bar
        :price="total"
        button-text="提交订单"
        @submit="onSubmit"
      />
    </div>
    <van-popup duration="0.3" round v-model="deletecart">
      <span style="padding: 5px; font-size: 16px; border-radius: 12px"
        >删除成功</span
      >
    </van-popup>
    <van-popup duration="0.3" round v-model="issubmit">
      <span style="padding: 5px; font-size: 16px; border-radius: 12px"
        >提交成功</span
      >
    </van-popup>
       <scroller />
  </div>
</template>
<style lang="scss" scoped>
.delete {
  position: relative;
  position: sticky;
  span {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.mycart {
  margin-top: 30px;
}
.prouct-model {
  width: 355px;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 10px;
  table {
    // border: 1px solid #777;
    background-color: #fff;
    list-style: none;

    tr {
      //   background-color: red;
      //   border: 1px solid #333;
      box-sizing: border-box;
      .changnum {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 15px;
        div {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          // border: 1px solid #333;
        }
      }
      th,
      td {
        width: 100px;
        height: 100px;
        background-color: #fff;
        list-style: none;
        font-size: 8px;
        // border-left: 1px solid #ccc;
        // border-top: 1px solid #ccc;
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
</style>
<script>
import navHeader from "../components/herder.vue";
import scroller from "../components/scroller.vue";
import "../http/request";
import { mycartFunc } from "../http/request";
import { mapState } from "vuex";
import { Dialog } from "vant";
import Vue from "vue";
import { storeAllFunc } from "../http/store";
import { orderAllFunc } from "../http/order";
Vue.use(Dialog);
let getresult = [];
export default {
  components: {
    navHeader,
    scroller,
    [Dialog.Component.name]: Dialog.Component,
  },
  watch: {
    result(value) {
      console.log(123);
    },
  },
  data() {
    return {
      gid: "",
      result: [],
      deletecart: false,
      issubmit: false,
    };
  },
  computed: {
    ...mapState(["user"]),
    total() {
      let total = 0;
      this.result.forEach((element) => {
        total += element.num * element.price;
      });
      return total.toFixed(2) * 100;
    },
  },
  methods: {
    deletemycart(mcid) {
      this.deletecart = true;
      storeAllFunc("/mycart/delete", { mcid }).then((data) => {
        console.log(data);
      });
      mycartFunc("/mycart", { uid: localStorage.getItem("userid") }).then(
        (data) => {
          // console.log(data);
          this.result = data;
        }
      );
    },
    onSubmit() {
      if (this.result.length >0) {
        console.log("保存至本地");

        if (getresult != null) {
          getresult.push(this.result);
          localStorage.setItem("orderreslt", JSON.stringify(getresult));
        }
      }
      this.issubmit = true;
      if (this.result.length>0) {
        this.result.forEach((item) => {
          storeAllFunc("/mycart/delete", { mcid: item.mcid }).then((data) => {
            console.log(data);
          });
        });
      }

      mycartFunc("/mycart", { uid: localStorage.getItem("userid") }).then(
        (data) => {
          // console.log(data);
          this.result = data;
        }
      );

      let orderdata = this.result;
      orderAllFunc("/order/add", { orderdata }).then((data) => {
        console.log(data);
      });
      // console.log('obsubmit start?!');
      console.log(this.total);
      // Dialog.alert({
      //     title:'是否提交购物车商品'
      // })
    },
  },

  created() {
    this.getresult = JSON.parse(localStorage.getItem("orderreslt"));
    mycartFunc("/mycart", { uid: localStorage.getItem("userid") }).then(
      (data) => {
        this.result = data;
      }
    );
  },
};
</script>
